<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01rest</title>
    <style>
        button {
            color: red;
            font-size: 20px;
            padding: 10px 15px;
            background-color: rgb(8, 238, 8);

        }
    </style>

</head>

<body>


    <h3 id="demo">哈哈哈威武不屈</h1>
        <button type="button" onclick='cl()'>点击我改变内容和样式！</button>
        <button type="button" onclick='c2()'>点击查看各种输出！</button>
        <h3 id="demo2" onmousemove='c3()' onmouseout='c4()'>鼠标移入看时间！</h3>
        <p id="p1">20=='20'?true</p>
        <p id="p1">20==='20'?false</p>
        <hr>

        <script>

            function cl(a) {
                console.log(document.getElementById("demo").innerHTML)
                document.getElementById("demo").innerHTML = "Hello JavaScript!";
                document.getElementById("demo").style.color = "red";
            }
            function c2() {

                window.alert("弹框输出")
                document.write('写入 HTML 输出')
                console.log("日志输出")


            }
            function c3() {

                document.getElementById('demo2').innerHTML = Date()


            }
            function c4() {
                document.getElementById('demo2').innerHTML = '鼠标移入看时间！'
            }

            


        </script>

</body>



</html>